<template>
	<div class="container" @click="handleGallaryClick">
		<div class="wrapper">
			<swiper :options="swiperOption">
			<!-- slides -->
				<!-- <swiper-slide v-for="item of list" :key="item.id" v-if="showSwiperList">
					<img class="swiper-img" :src="item.imgUrl" />
				</swiper-slide> -->
				<swiper-slide v-for="(item,index) of imgs" :key="index">
					<img class="gallary-img" :src="item" />
				</swiper-slide>
				<div class="swiper-pagination"  slot="pagination"></div>
			</swiper>
			
		</div>
		
	</div>
</template>

<script>
	export default {
		name:'commonGallary',
		props: {
			imgs: Array
		},
		data() {
			return {
				swiperOption: {
				  pagination: '.swiper-pagination',
				  paginationType: 'fraction',
				  observeParents: true,
				  observer: true
				},
			};
		},
		methods: {
			handleGallaryClick() {
				this.$emit('close')
			}
		},
	}
</script>

<style scoped lang="stylus">
	.container >>> .swiper-container 
	 overflow:inherit
	.container
	 position:fixed
	 left:0
	 right:0
	 top:0
	 bottom:0
	 background:#000
	 z-index:99
	 display:flex
	 flex-direction:column
	 justify-content:center
	 .wrapper
	  width:100%
	  height:0
	  padding-bottom:100%
	  .gallary-img
	   width:100%
	  .swiper-pagination
	   color:#fff
	   bottom: -1rem
</style>
